<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<h:outputStylesheet library="css" name="login.css" />		
	<h:outputScript library="js" name="jquery-1.7.1.min.js" />
	<ui:insert name="title">
		<title>The Change | Login System</title>
	</ui:insert>
	<script>
		$('document').ready(function(){
			$('#loginForm').keypress(function(event){
				var keycode = (event.keyCode ? event.keyCode : event.which);
				if(keycode == 13){
					$('#loginForm').find('a').trigger('click');
				}
			});
		});
	</script>
</h:head>
<h:body>
	<div class="main">
		<div class="main-item center">
			<img src="resources/images/login_logo.png" alt=""/>
		</div>
		<div class="main-item">
			<h:form id="loginForm">
				<f:event listener="#{login.onload}" type="preRenderView"></f:event>
				<div class="login-input">
					<span>Company ID</span>
					<h:inputText></h:inputText>
					<span>Username</span>
					<h:inputText  value="#{login.account.username}"></h:inputText>
					<span>Password</span>
					<h:inputSecret value="#{login.account.password}"></h:inputSecret>
					<h:commandLink id="loginButton" class="button" action="#{login.login}">SUBMIT</h:commandLink>
				</div>
			</h:form>
		</div>
	</div>
</h:body>
</html>